<html lang="zh">
<head>
<meta charset="utf-8" />
<link rel="stylesheet"
	href="__PUBLIC__/editor.md/css/editormd.preview.css" />

<style type="text/css">

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code,
	form, fieldset, legend, input, textarea, p, blockquote, th, td, hr,
	button, article, aside, details, figcaption, figure, footer, header,
	hgroup, menu, nav, section {
	margin: 0;
	padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup,
	menu, nav, section, summary {
	display: block;
}

audio, canvas, video {
	display: inline-block;
}

img {
	border: none;
	vertical-align: middle;
}

ul, ol {
	/*list-style: none;*/
	
}

.clear {
	*zoom: 1; /* for IE 6/7 */
}

.clear:before, .clear:after {
	height: 0;
	content: "";
	font-size: 0;
	display: table;
	line-height: 0; /* for Opera */
	visibility: hidden;
}

.clear:after {
	clear: both;
}

body {
	font-size: 14px;
	color: #666;
	font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Tahoma, STXihei,
		"华文细黑", STHeiti, "Helvetica Neue", Helvetica, Tahoma, "Droid Sans",
		"wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti,
		"黑体", sans-serif;
	background: #fff;
}

#layout {
	text-align: left;
	padding : 20px;
}

#layout>header, .btns {
	padding: 15px 0;
	width: 90%;
	margin: 0 auto;
}

.btns {
	padding-top: 0;
}

.btns button {
	padding: 2px 8px;
}

#layout>header>h1 {
	font-size: 20px;
	margin-bottom: 10px;
}

#layout>header, .btns {
	width: auto;
}

#sidebar {
	width: 280px;
	height: 100%;
	position: fixed;
	top: 0px;
	right: 0;
	overflow: hidden;
	background: #fff;
	z-index: 100;
	padding: 18px;
	border: 1px solid #ddd;
	border-top: none;
	border-bottom: none;
}

#sidebar:hover {
	overflow: auto;
}

#sidebar h1 {
	font-size: 14px;
}

#custom-toc-container {
	padding-left: 0;
}

#editormd-view-text, #editormd-view {
	padding-left: 0;
	padding-right: 290px;
	margin: 0;
}
</style>
<!-- 这里开始是内容 -->
</head>
<body>
	<div id="layout">
		<div id="editormd-view"></div>
		<div id="sidebar">
			<h1>Table of Contents</h1>
			<div class="markdown-body editormd-preview-container"
				id="custom-toc-container">#custom-toc-container</div>
		</div>
	</div>
	<div id="editormd-view-text" style="display: none">{$page.page_content}</div>
	<script src="__PUBLIC__/js/common/jquery.min.js"></script>
	<script src="__PUBLIC__/editor.md/lib/marked.min.js"></script>
	<script src="__PUBLIC__/editor.md/lib/prettify.min.js"></script>
	<script src="__PUBLIC__/editor.md/lib/raphael.min.js"></script>
	<script src="__PUBLIC__/editor.md/lib/underscore.min.js"></script>
	<script src="__PUBLIC__/editor.md/lib/sequence-diagram.min.js"></script>
	<script src="__PUBLIC__/editor.md/lib/flowchart.min.js"></script>
	<script src="__PUBLIC__/editor.md/lib/jquery.flowchart.min.js"></script>
	<script src="__PUBLIC__/editor.md/editormd.min.js"></script>

	<script>
		editormd.katexURL = {
			css : "__PUBLIC__/editor.md/css/katex.min",
			js : "__PUBLIC__/editor.md/lib/katex.min"
		};
		editormd.markdownToHTML("editormd-view", {
			markdown : $("#editormd-view-text").text(),//+ "\r\n" + $("#append-test").text(),
			//htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
			htmlDecode : "style,script,iframe", // you can filter tags decode
			//toc             : false,
			tocm : true, // Using [TOCM]
			tocContainer : "#custom-toc-container", // 自定义 ToC 容器层
			//gfm             : false,
			//tocDropdown     : true,
			// markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
			emoji : true,
			taskList : true,
			tex : true, // 默认不解析
			flowChart : true, // 默认不解析
			sequenceDiagram : true, // 默认不解析
		});
	</script>
</body>
</html>
